<template>
	<view>
		<view class="row-view">
			<view v-if="productInfo" class="merName util-font-medium">{{productInfo.merMerchant.name}}</view>
			<view class="product-info-view">
				<image class="product-info-image" :src="productInfo.pics.split(',')[0]" mode="aspectFill"></image>
				<!-- <image v-else class="product-info-image" :src="productInfo.pics.split(',')[0]" mode="aspectFill"></image> -->
				<view class="product-info-content">
					<view class="product-info-intro">
						<image class="product-info-intro-image" src="../../static/index/tuan.png" mode="aspectFit"></image>
						<text class="product-info-intro-text util-font-medium">{{productInfo.name}}</text>
					</view>
					<view class="product-info-price">
						<view class="product-info-price-text util-font-medium">￥{{productInfo.price/100.0}}</view>
						<view class="product-info-price-original util-font-regular">￥{{productInfo.originalPrice/100.0}}</view>
						<!-- <view class="product-info-price-brokerage">返佣{{productInfo.commission/100.0}}元</view> -->
						<view v-if="userInfo && userInfo.type == 1" class="product-info-price-brokerage">返佣{{productInfo.merProductCommission.littleExpert/100.0}}元</view>
						<view v-else-if="userInfo && userInfo.type == 2" class="product-info-price-brokerage">返佣{{productInfo.merProductCommission.bigExpert/100.0}}元</view>
						<view class="product-number-view">
							<image class="product-number-add" src="../../static/order/add_disable.png" mode="aspectFit" @click="productNumberAdd"></image>
							<view class="product-number-text util-font-medium">{{productNumber}}</view>
							<image v-if="productNumber > 1" class="product-number-sub" src="../../static/order/sub2.png" mode="aspectFit"
							 @click="productNumberSub"></image>
							<image v-else class="product-number-sub" src="../../static/order/sub_disable.png" mode="aspectFit" @click="productNumberSub"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="amount-view">
				<view class="row-title util-font-regular">应付总价</view>
				<view class="amount-text util-font-medium">￥{{amount/100.}}</view>
			</view>
			<view class="red-packet-view">
				<view class="row-title util-font-regular">使用红包</view>
				<view class="red-packet-text util-font-medium">-￥{{redPacketValue/100.}}</view>
				<!-- <input class="red-packet-text util-font-medium" :type="redPacketType" :value.sync="redPacketValue" placeholder="请输入使用的红包数量"
				 placeholder-class="red-packet-text-input-placeholder" @input="redPacketValueInput" @focus="redPacketValueFocus" @blur="redPacketValueBlur"></input> -->
			</view>
			<!-- <view class="can-use-red-packet-view">

			</view> -->
		</view>
		<view class="row-view">
			<view class="phone-view">
				<view class="phone-title util-font-medium">手机号码</view>
				<input class="phone-text util-font-medium" type="number" :value="mobile" placeholder="请输入您的常用手机号" placeholder-class="phone-text-input-placeholder" @input="phoneValueInput"></input>
			</view>
		</view>
		<view class="row-view">
			<view class="wechat-pay-view">
				<image class="wechat-pay-logo" src="../../static/order/wechat.png" mode="aspectFit"></image>
				<view class="wechat-pay-title util-font-medium">微信支付</view>
				<image class="wechat-pay-select" src="../../static/order/select.png" mode="aspectFit"></image>
			</view>
		</view>
		<!-- 占位 -->
		<view class="placeholder-view">

		</view>
		<!-- 底部view -->
		<view class="footer-view">
			<view class="footer-price-view util-font-medium">
				<view class="footer-price-title">实付：</view>
				<view class="footer-price-icon">￥</view>
				<view class="footer-price-text">{{payment/100.}}</view>
				<!-- <view class="price-brokerage">
					返佣{{commissionAmount/100.0}}元
				</view> -->
				<view v-if="userInfo && userInfo.type == 1" class="price-brokerage">返佣{{productInfo.merProductCommission.littleExpert/100.0}}元</view>
				<view v-else-if="userInfo && userInfo.type == 2" class="price-brokerage">返佣{{productInfo.merProductCommission.bigExpert/100.0}}元</view>
			</view>
			<view class="footer-confirm-button util-font-medium" @click="confirm">确认支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				productInfo: null,
				mobile: '',
				
				productNumber: 1,
				amount: 0,
				commissionAmount: 0,
				payment: 0,
				redPacketValue: 0,
				redPacketPersent: 0,
				
			}
		},
		onLoad() {
			var that = this
			uni.$on("userInfoRefresh", function(){
				that.userInfo = uni.getStorageSync('userInfo')
				that.computedPrice()
			})
			
			this.userInfo = uni.getStorageSync('userInfo')
			this.productInfo = uni.getStorageSync("selectedProduct")
			this.mobile = uni.getStorageSync('orderMobile')
			
			// 计算金额
			this.computedPrice()
			
			// 请求个人信息
			this.$urlRequest.getUserInfoById(this.userInfo.id)
		},
		methods: {
			computedPrice: function(){
				// 计算总价
				this.amount = this.productInfo.price * this.productNumber
				// 计算佣金
				var commission = 0
				if (this.userInfo.type == 2) {
					commission = this.productInfo.merProductCommission.bigExpert
				}
				if (this.userInfo.type == 1) {
					commission = this.productInfo.merProductCommission.littleExpert
				}
				this.commissionAmount = commission * this.productNumber
				// 计算红包使用数量
				this.redPacketPersent = parseFloat(this.productInfo.merProductCommission.redpacketScaled)
				var canUseRedPacketValue = Math.floor(this.amount * this.redPacketPersent)
				if (this.userInfo && this.userInfo.appRedPacket && this.userInfo.appRedPacket.amount) {
					this.redPacketValue = (this.userInfo.appRedPacket.amount>canUseRedPacketValue)?canUseRedPacketValue:this.userInfo.appRedPacket.amount
				}else {
					this.redPacketValue = 0
				}
				// 计算实付金额
				this.payment = this.amount - this.redPacketValue
				console.log('payment' + this.payment)
			},
			productNumberAdd: function() {
				
				uni.showModal({
					content: '本商品限购一份',
					showCancel: false
				});
				return
				
				this.productNumber += 1
				this.computedPrice()
			},
			productNumberSub: function() {
				if (this.productNumber <= 1) {
					return;
				}

				this.productNumber -= 1
				
				this.computedPrice()
			},

			redPacketValueInput: function(event) {
				console.log(this.redPacketValue)
			},
			redPacketValueFocus: function(event) {
				this.redPacketValue = this.redPacketValue.replace(/-/i, '')
			},
			redPacketValueBlur: function(event) {
				this.redPacketValue = '-' + parseFloat(this.redPacketValue)
			},
			phoneValueInput: function(event) {
				console.log(this.redPacketValue)
				this.mobile= event.detail.value
			},
			confirm: function(){
				var that = this
				
				if (that.mobile.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
					});
					return
				}
				if (!(/^1[3-9]\d{9}$/.test(that.mobile))) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的手机号',
					});
					return
				}
				
				uni.setStorageSync('orderMobile', that.mobile)
				
				that.sendRequest({
					url: 'app/ordOrders/add',
					method: 'POST',
					header: that.$urlRequest.getHeader('token', 'json'),
					data: {
						type: 0,
						appUserId: that.userInfo.id,
						shareUserId: that.userInfo.id,
						merchantId: that.productInfo.merMerchant.id,
						productId: that.productInfo.id,
						number: that.productNumber,
						amount: that.amount,
						redPacketMoney: that.redPacketValue,
						payment: that.payment,
						phone: that.mobile
					},
					success: function(orderRes){
						console.log(JSON.stringify(orderRes))
						
						that.sendRequest({
							url: 'app/ordOrders/toWxpay/' + orderRes.data.data.id,
							method: 'POST',
							header: that.$urlRequest.getHeader('token'),
							success: function(wxres) {
								console.log(wxres)
						
								uni.requestPayment({
									provider: 'wxpay',
									timeStamp: wxres.data.data.timeStamp,
									nonceStr: wxres.data.data.nonceStr,
									package: wxres.data.data.packageValue,
									signType: wxres.data.data.signType,
									paySign: wxres.data.data.paySign,
									success: function(payres) {
										uni.showToast({
											title: '支付成功',
											mask: true,
											duration: 1000
										})
										setTimeout(function() {
											uni.redirectTo({
												url: 'detail?id=' + orderRes.data.data.id
											})
										}, 1000)
									},
									fail: function(err) {
										if (err.errMsg.requestPayment == 'fail cancel') {
											uni.showToast({
												title: '用户取消了支付',
												duration: 1000,
												icon: 'none'
											})
										} else {
											uni.showToast({
												title: err.errMsg.requestPayment,
												duration: 1000,
												icon: 'none'
											})
										}
										setTimeout(function() {
											uni.redirectTo({
												url: 'detail?id=' + orderRes.data.data.id
											})
										}, 0)
									}
								})
							}
						})
					}
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}

	.row-view {
		margin: 20upx;
		padding: 30upx;
		background-color: white;
		border-radius: 20upx;
	}

	/* 商品详情 */
	.merName {
		width: 650upx;
		height: 42upx;
		color: #333333;
		font-size: 32upx;
	}

	.product-info-view {
		width: 650upx;
		height: 144upx;
		margin-top: 20upx;
		position: relative;
	}

	.product-info-image {
		width: 180upx;
		height: 144upx;
		border-radius: 10upx;
		float: left;
	}

	.product-info-content {
		width: 450upx;
		height: 144upx;
		float: right;
	}

	.product-info-intro {
		width: 100%;
		/* line-height: 40upx; */
		//两行
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		
	}

	.product-info-intro-image {
		width: 36upx;
		height: 36upx;
		position: relative;
		top: 8upx;
	}

	.product-info-intro-text {
		width: 100%;
		font-size: 29upx;
		color: #333333;
		margin-left: 10upx;
		margin-top: 10upx;
	}

	.product-info-price {
		width: 100%;
		height: 45upx;
		margin-top: 8upx;
		float: left;
	}

	.product-info-price-text {
		height: 40upx;
		line-height: 40upx;
		margin-top: 4upx;
		color: #d8622c;
		font-size: 36upx;
		float: left;
	}

	.product-info-price-original {
		height: 42upx;
		line-height: 42upx;
		color: #bbbbbb;
		font-size: 20upx;
		text-decoration: line-through;
		float: left;
		position: relative;
		top: 6upx;
		left: 10upx;
	}

	.product-info-price-brokerage {
		padding: 3upx 6upx 3upx;
		background-color: #ec6e2d;
		float: left;
		border-radius: 5upx;
		color: #FFFFFF;
		font-size: 20upx;
		line-height: 26upx;
		margin-top: 10upx;
		margin-left: 20upx;
	}

	.product-number-view {
		margin-top: 8upx;
		float: right;
	}

	.product-number-add {
		float: right;
		width: 36upx;
		height: 36upx;
	}

	.product-number-text {
		float: right;
		color: #333333;
		font-size: 30upx;
		height: 36upx;
		line-height: 36upx;
		padding: 0 15upx 0;
	}

	.product-number-sub {
		float: right;
		width: 36upx;
		height: 36upx;
	}

	.amount-view {
		width: 650upx;
		height: 55upx;
		margin-top: 55upx;
	}

	.row-title {
		height: 55upx;
		line-height: 55upx;
		font-size: 30upx;
		color: #666666;
		float: left;
	}
	.amount-text {
		height: 55upx;
		line-height: 55upx;
		font-size: 32upx;
		color: #333333;
		float: right;
	}
	
	.red-packet-view {
		width: 650upx;
		height: 55upx;
		margin-top: 30upx;
	}
	.red-packet-text {
		height: 60upx;
		line-height: 60upx;
		color: red;
		font-size: 32upx;
		float: right;
		text-align: right;
	}
	
	.red-packet-text-input-placeholder {
		font-size: 28upx;
		color: #999999;
	}

	.can-use-red-packet-view {
		width: 650upx;
		height: 55upx;
		background-color: orange;
	}

	.phone-view {
		width: 650upx;
		height: 60upx;
	}

	.phone-title {
		height: 60upx;
		line-height: 60upx;
		color: #333333;
		font-size: 32upx;
		float: left;
	}

	.phone-text {
		height: 60upx;
		line-height: 60upx;
		color: #333333;
		font-size: 32upx;
		float: right;
		text-align: right;
	}

	.phone-text-input-placeholder {
		font-size: 28upx;
		color: #999999;
	}

	.wechat-pay-view {
		width: 650upx;
		height: 60upx;
	}

	.wechat-pay-logo {
		width: 60upx;
		height: 60upx;
		float: left;
	}

	.wechat-pay-title {
		height: 60upx;
		line-height: 60upx;
		color: #333333;
		font-size: 32upx;
		float: left;
		margin-left: 20upx;
	}

	.wechat-pay-select {
		width: 40upx;
		height: 40upx;
		float: right;
		margin-top: 10upx;
	}


	/* 占位 */
	.placeholder-view {
		width: 100%;
		height: 128upx;
		margin-top: 20upx;
	}

	/* 底部view */
	.footer-view {
		width: 100%;
		height: 128upx;
		background-color: #FbFbFb;
		position: fixed;
		bottom: 0;
	}

	.footer-confirm-button {
		width: 260upx;
		height: 88upx;
		margin: 20upx 30upx;
		background: linear-gradient(to right, #eb8735, #ea5a2e);
		float: right;
		border-radius: 44upx;
		line-height: 88upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 34upx;
	}

	.footer-price-view {
		width: 400upx;
		height: 88upx;
		line-height: 88upx;
		margin: 20upx 0upx 20upx 30upx;
		float: left;
	}

	.footer-price-title {
		color: #333333;
		font-size: 30upx;
		float: left;
	}

	.footer-price-icon {
		height: 88upx;
		line-height: 88upx;
		color: #d8622c;
		font-size: 26upx;
		float: left;
		position: relative;
		top: 4upx;
	}

	.footer-price-text {
		height: 88upx;
		line-height: 88upx;
		color: #d8622c;
		font-size: 46upx;
		float: left;
	}

	.price-brokerage {
		padding: 3upx 10upx 3upx;
		background-color: #ec6e2d;
		float: left;
		height: 40upx;
		line-height: 40upx;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		border-bottom-right-radius: 20upx;
		color: #FFFFFF;
		font-size: 25upx;
		margin-top: 5upx;
		margin-left: 10upx;
	}
</style>
